<template>
  <div style="border: 1px solid #ccc; padding: 15px; margin: 5px 0px">
    <h5 style="color: red" class="mb15">
      注意：点击列表数据即可编辑用法频次、剂量、天数和数量等信息
    </h5>
    <el-table
      :data="selectMechie"
      border
      highlight-current-row
      @row-click="rowClick"
      :key="keys"
    >
      <el-table-column
        prop="name"
        width="140px"
        label="药品名称及规格"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.name
          }}<span v-if="scope.row.DrugClassCode != '003'">{{
            "(" + scope.row.size + ")"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="dosage"
        label="剂量"
        width="80px"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ scope.row.dosage ? scope.row.dosage : ""
          }}{{ scope.row.dosageUnit ? scope.row.dosageUnit : "" }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="DrugClassCode == '002' || DrugClassCode == '003'"
        prop="decocting"
        label="煎煮法"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        width="190px"
        v-if="DrugClassCode == '001'"
        prop="usage"
        label="用法频次"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{
            (scope.row.usage ? scope.row.usage : "") +
            " " +
            (scope.row.frequency ? scope.row.frequency : "")
          }}
        </template>
      </el-table-column>
      <!--    <el-table-column
        v-if="DrugClassCode == '001'"
        prop="frequency"
        label="频次"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column> -->

      <el-table-column
        v-if="DrugClassCode == '001'"
        width="60"
        prop="days"
        label="天数"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        v-if="DrugClassCode == '001'"
        width="60"
        prop="num"
        label="数量"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        v-if="DrugClassCode == '001'"
        prop="price"
        label="单价"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>

      <el-table-column
        prop="DrugMinUnit"
        label="单位"
        width="100px"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        label="总金额"
        v-if="DrugClassCode == '001'"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{
            !(scope.row.price * scope.row.num)
              ? ""
              : scope.row.price * scope.row.num
          }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button type="danger" size="small" @click="delItem(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-form
      style="margin-top: 15px"
      :inline="true"
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      class="demo-ruleForm"
    >
      <el-form-item label="药品" prop="prescribeMedicine">
        <el-input type="input" disabled size="small" v-model="ruleForm.name">
        </el-input>
      </el-form-item>
      <el-form-item label="规格" prop="size">
        <el-input type="input" disabled size="small" v-model="ruleForm.size">
        </el-input>
      </el-form-item>
      <el-form-item label="剂量" prop="dosage">
        <div class="flex">
          <el-input
            type="number"
            @input="$forceUpdate()"
            size="small"
            v-model="ruleForm.dosage"
          >
          </el-input>
          <el-input
            class="ml15"
            @input="$forceUpdate()"
            size="small"
            v-model="ruleForm.dosageUnit"
          >
          </el-input>
        </div>
      </el-form-item>
      <el-form-item label="用法" prop="usage" v-if="DrugClassCode == '001'">
        <el-select
          v-model="ruleForm.usage"
          size="small"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in usageArr"
            :key="item.id"
            :label="item.DrugModeName"
            :value="item.DrugModeName"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="频次" prop="frequency" v-if="DrugClassCode == '001'">
        <el-select
          v-model="ruleForm.frequency"
          size="small"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in frequencyArr"
            :key="item.id"
            :label="item.DrugFreName"
            :value="item.DrugFreName"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="" prop="days" v-if="DrugClassCode == '001'">
        <div class="flex">
          <el-input
            type="number"
            :min="0"
            :max="100"
            size="small"
            v-model="ruleForm.days"
          >
          </el-input>
          <span>天</span>
        </div>
      </el-form-item>
      <el-form-item label="取药数量" prop="num" v-if="DrugClassCode == '001'">
        <div class="flex">
          <el-input
            type="number"
            :min="0"
            :max="100"
            size="small"
            v-model="ruleForm.num"
          >
          </el-input>
          <span>{{ ruleForm.DrugMinUnit }}</span>
        </div>
      </el-form-item>
      <el-form-item
        label="煎煮法"
        prop="decocting"
        v-if="DrugClassCode == '002' || DrugClassCode == '003'"
      >
        <el-select
          v-model="ruleForm.decocting"
          size="small"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in decoctingArr"
            :key="item.DecoctionCode"
            :label="item.DecoctionName"
            :value="item.DecoctionName"
          >
          </el-option>
        </el-select>

        <!--      <el-input size="small" v-model="ruleForm.decocting"> </el-input> -->
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4 }"
          size="small"
          style="width: 800px"
          v-model="ruleForm.remark"
        >
        </el-input>
      </el-form-item>
      <!--   <el-form-item label="处方模板" prop="prescriptionTemplate">
              <el-select
                v-model="ruleForm.prescriptionTemplate"
                placeholder="请选择"
                clearable
                @change="handleChangeData($event)"
              >
                <el-option
                  v-for="item in templateArr"
                  :key="item.id"
                  :label="item.template_name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item> -->

      <!--   <el-form-item label="诊断疾病" prop="disease">
                <el-select
                  v-model="ruleForm.disease"
                  size="small"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in list"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  ></el-option>
                </el-select>
              </el-form-item> -->
      <!--   <el-form-item label="主诉" prop="main">
                <el-input
                  size="small"
                  type="input"
                  placeholder="请输入主诉"
                  v-model="ruleForm.main"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-import"
                    @click="importPatientInfo"
                    >导入患者描述信息</el-button
                  >
                </el-input>
              </el-form-item> -->
      <!--   <el-form-item label="开药" prop="prescribeMedicine">
                <el-input
                  type="input"
                  disabled
                  v-model="ruleForm.prescribeMedicine"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click="medicineClick"
                  ></el-button>
                </el-input>
              </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
import { ApigetJADataCN } from "@/api/index";
export default {
  data() {
    return {
      keys: 0,
      decoctingArr: [{ label: "煎煮法1" }],
      ruleForm: {},
      rules: {},
    };
  },
  props: ["selectMechie", "DrugClassCode", "frequencyArr", "usageArr"],

  watch: {
    selectMechie: {
      immediate: true,
      deep: true,
      handler(newVal, oldVal) {
        if (newVal && newVal.length > 0) {
          this.$emit("getWesternData", newVal);
        } else {
          this.ruleForm = {};
        }
        this.keys++;
      },
    },

    ruleForm: {
      immediate: true,
      deep: true,
      handler(newVal, oldVal) {
        console.log(newVal);
        this.keys++;
      },
    },
  },
  methods: {
    getJADataCN() {
      ApigetJADataCN().then((res) => {
        this.decoctingArr = res.data;
      });
    },
    rowClick(e) {
      console.log(e);
      if (e.DrugClassCode != "001") {
        this.getJADataCN();
      }
      this.ruleForm = e;
    },
    submit() {},
    delItem(val) {
      let index = this.selectMechie.findIndex((item) => {
        return item.id == val.id;
      });
      this.selectMechie.splice(index, 1);
      this.$emit("delItem", val);
    },
  },
  destroyed() {
    this.ruleForm = {};
  },
};
</script>

<style>
</style>